<template>
  <div class="mainDiv">
    <el-form ref="bannerForm" label-width="150px" label-position="left">
      <el-form-item label="轮播标题" prop="title">
        <el-input v-model="bannerObj.title" style="width: 400px;" placeholder="必填，请输入文章标题，小于10个中文" clearable />
      </el-form-item>
      <el-form-item label="轮播图片" prop="image">
        <UploadAvatar v-model="bannerObj.image" tipmsg="请上传jpg.png格式的图片" />
      </el-form-item>
      <el-form-item label="外链地址" prop="external_url">
        <el-input v-model="bannerObj.external_url" style="width: 400px;" placeholder="选填，请输入外链地址，开头加https://或http://" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="weight">
        <el-input-number v-model="bannerObj.weight" style="width: 400px;" placeholder="选填，数值越大，排序越靠前" clearable />
      </el-form-item>
      <el-form-item label="是否显示" prop="is_show">
        <el-radio v-model="bannerObj.is_show" :label="1">显示</el-radio>
        <el-radio v-model="bannerObj.is_show" :label="2">隐藏</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="comfirmLoading" @click="handleComfirmClick">确认</el-button>
        <el-button @click="backToPrev">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addNewCarousels, modifyCarousels } from '../../api/informationNetwork'
export default {
  components: {
    UploadAvatar: () => import('../informationNetwork/Upload')
  },
  data() {
    return {
      action: 'new',
      carouselId: null,
      bannerObj: {
        title: null,
        image: '',
        external_url: null,
        weight: null,
        is_show: 1 // 1---显示   2---隐藏
      },
      comfirmLoading: false
    }
  },
  mounted() {
    if (this.$route.query.data) {
      this.bannerObj = JSON.parse(this.$route.query.data)
      this.carouselId = this.bannerObj.id
      this.action = 'modify'
    } else {
      this.action = 'new'
    }
  },
  methods: {
    // 返回上一步
    backToPrev() {
      this.$router.push({ path: '../banner' })
    },
    handleComfirmClick() {
      if (this.bannerObj.image === '') {
        this.$message({
          type: 'error',
          message: '请上传轮播图片'
        })
      } if (!this.bannerObj.title || this.bannerObj.title === '') {
        this.$message({
          type: 'error',
          message: '请填写轮播标题'
        })
      } else {
        this.comfirmLoading = true
        if (this.action === 'new') { // 新增
          addNewCarousels(this.bannerObj).then(res => {
            this.$message({
              type: 'success',
              message: '新增轮播成功！'
            })
            this.$router.push({ path: '../banner' })
          }).finally(() => {
            this.comfirmLoading = false
          })
        } else { // 修改
          modifyCarousels(this.carouselId, this.bannerObj).then(res => {
            this.$message({
              type: 'success',
              message: '该轮播修改成功！'
            })
            this.$router.push({ path: '../banner' })
          }).finally(() => {
            this.comfirmLoading = false
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
  $defaultColor: #0A2145;
  .mainDiv {
    padding: 30px;
  }
  .el-input__inner {
    color: $defaultColor;
    font-size: 14px;
  }
  .el-form--label-left .el-form-item__label { color: $defaultColor; }

  .avatar-uploader .el-upload {
    cursor: pointer;
    // position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 14px;
    color: #0C66FF;
    width: 144px;
    height: 144px;
    text-align: center;
    border: 1px dashed #E1E4EB;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .plus {
      font-size: 28px;
      width: 38px;
      height: 38px;
      line-height: 38px;
      margin: 0 auto;
      border-radius: 50%;
      background: #FAFAFB;
      margin-bottom: 10px;
    }
    span {
      height: 20px;
      line-height: 20px;
    }
    .el-form-item__content {line-height: 20px;}
  }
  .avatar {
    width: 144px;
    height: 144px;
    display: block;
  }
  .upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      margin-left: 20px;
      color: #9DA6B5;
      font-size: 14px;
      line-height: 19px;
    }
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    border-radius: 8px;
    background-color: #0C66FF;
    border-color: #0C66FF;
    box-shadow: -1px 0 0 0 #0C66FF;
  }
  .el-radio-button__inner {
    border: none;
    background: transparent;
    padding: 7px 17px;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  .el-radio-group {
    border: 1px solid #F1F1F5;
    border-radius: 8px;
  }

  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }

</style>
